<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="角色列表"
      row-key="id"
      :indent="30"
      :columns="columns"
      :request-api="calendarList"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #days="scope">
        <el-button circle v-for="(item, index) in JSON.parse(scope.row.days)" :key="item" :type="item ? 'danger' : 'success'">
          {{ index }}</el-button
        >
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref, onBeforeMount } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { calendarList } from "@/api/modules/common";
import ProTable from "@/components/ProTable/index.vue";
import { useI18n } from "vue-i18n";

const calendar = ref([]);
const { t } = useI18n();

onBeforeMount(() => {
  calendarList().then(response => {
    calendar.value = response.data;
  });
});

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: t("common.calendar.month"), width: 120 },
  { prop: "days", label: t("common.calendar.day") }
];
</script>
